<template>
  <div class="toast" v-show="show">
    <div>{{this.message}}</div>
  </div>
</template>

<script>
export default {
  name:"Toast",
  props: {
    // message: {
    //   type: String,
    //   default:""
    // },
    // show:{
    //   type: Boolean,
    //   default:false
    // }
  },
  data(){
    return {
      show: false,
      message:''
    }
  },
  methods: {
    showToast(message,time=2000){
      this.message = message;
      this.show = true;

      setTimeout(()=>{
        this.show = false;
        this.message = ""
      },time)
    }
  }
}

</script>

<style scoped>
.toast{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding : 8px 10px;
  color:#fff;
  background-color:rgba(0,0,0,0.7);
  z-index:999;
}
</style>